<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>001</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/vue-resource.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>

    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>

<div id="body">

    <div id="body_navigation_bar">
        <nav class="navbar navbar-default">
            <div class="container-fluid">

                <ul class="nav navbar-nav">
                    <li><a href="index.html">主页</a></li>
                    <li><a href="html/article.html">文章</a></li>
                    <li><a href="html/img.html">图片</a></li>
                    <li><a href="">归档</a></li>
                </ul>
                <ul class="nav navbar-nav" style="float: right">
                    <li ><a href="#">-001</a></li>
                </ul>
            </div>
        </nav>
    </div>


    <div id="img_info">
        <div id="body_img_t">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active" style="width: 500px;height: 200px;background-color: #301a18">
                        <img src="img/roll1.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item" style="width: 100%;height: 200px">
                        <img src="img/roll2.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item" style="width: 100%;height: 200px;background-color: black">
                        <img src="img/roll3.jpg" alt="...">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div id="person_info_card">
            <div id="person_infocard" >
                <div class="single-member effect-1">
                    <div class="member-image">
                        <img src="img/member140.png" alt="Member">
                    </div>
                    <div class="member-info">
                        <h4>REDMAPLE</h4>
                        <h5>-001</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        <div class="social-touch">
                            <a class="fb-touch" href="#"></a>
                            <a class="tweet-touch" href="#"></a> 
                            <a class="linkedin-touch" href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="cotent_privide">
        <div id="cotent_privide_font" > welcome to view simple -001 blog,Suggestions are welcome to...</div>
    </div>

    <div id="body_wenzan">
        <!--wenzan left-->
        <!--内容进行分页显示 主页不分页 现在显示最新的5篇 -->
        <div id="head_wenzan_left">
            <div id="wenzan_div">
                <div class="row" v-for="wenzan in wenzans" id="wenzan_row_div">
                    <div id="wenzan_title_span">
                        <a style="color: black;cursor: pointer"  target="_Blank" @click="jumpreadmd($event)">
                            {{ wenzan.blogtitle }}
                        </a>
                    </div>
                    <div id="wenzan_content_span" >
                        <p style="color: black; font-size: 20px; ">
                            {{ wenzan.markdowninfo }}
                        </p>
                    </div>
                    <br>
                    <br>
                    <div id="wenzan_time_span">
                        <span style="font-size: 16px;float: right;">
                            {{ wenzan.writetime }}
                        </span>
                    </div>
                    <hr id="wenzan_hr">
                </div>
            </div>
        </div>

        <!--wenzan rigth-->
        <div id="head_wenzan_right">

            <div id="the_time_line">

                <div style="width: 300px; margin:0 auto;" >

                    <div class="wrapper">
                        <h1  class="site-header__title">一些时间线</h1>
                    </div>

                </div>

                <section class="timeline">
                    <div class="wrapper">
                        <div class="timeline__item timeline__item--0">
                            <div class="timeline__item__station">&nbsp;0</div>
                            <div class="timeline__item__content">
                                <h2 class="timeline__item__content__date">2018/7/29 17:56</h2>
                                <p class="timeline__item__content__description">tomcat的使用</p>
                            </div>
                        </div>
                        <div class="timeline__item timeline__item--1">
                            <div class="timeline__item__station">&nbsp;1</div>
                            <div class="timeline__item__content">
                                <h2 class="timeline__item__content__date">2018/7/29 17:56</h2>
                                <p class="timeline__item__content__description">jdl的简单使用</p>
                            </div>
                        </div>
                        <div class="timeline__item timeline__item--2">
                            <div class="timeline__item__station">&nbsp;2</div>
                            <div class="timeline__item__content">
                                <h2 class="timeline__item__content__date">2018/7/29 17:56</h2>
                                <p class="timeline__item__content__description">webservice理解</p>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

        </div>
    </div>


</div>

<div style="width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: grey">
    Foreign Exchange App-001<a href="www.redwys.xyz"><b>redmaple</b></a>
</div>

<script>

    var wenzan_vue = new Vue({
        el: '#wenzan_div',
        data: {
            wenzans: [
                {blogtitle: "tomcat的使用", writetime: "2018/7/29 17:56", markdowninfo: "tomcat是一个web服务器的容器", markdownstring: ""},
                {blogtitle: "jdl的简单使用", writetime: "2018/7/29 17:56", markdowninfo: "jdl是jhipster官方推出的一个实体域管理语言,可以更好的管理spring-boot项目中的实体", markdownstring: ""},
                {blogtitle: "webservice理解", writetime: "2018/7/29 17:56", markdowninfo: "把通用的服务抽取出来，构造一个中间件", markdownstring: ""},
            ],
        },
        methods: {
            jumpreadmd: function (event) {
                var el = event.currentTarget;
                /**
                 * 通过jsdata.js文件来存跳转需要的变量，
                 * 这种方式不成功
                 * @type {string}
                 */
                blogtitle = el.innerText;   // 拿到的字符串前面有空格，不懂
                blogtitle = blogtitle.replace(/(^\s*)/g, "");   // 去除前面的空格

                localStorage.setItem("blogtitle", blogtitle);
                window.location.href = "html/read.html";
                
            }
        }
    });

</script>

<script>
    /**
     * 时间轴
     * @type {string}
     */
    function customWayPoint(className, addClassName, customOffset) {
        var waypoints = $(className).waypoint({
            handler: function(direction) {
                if (direction == "down") {
                    $(className).addClass(addClassName);
                } else {
                    $(className).removeClass(addClassName);
                }
            },
            offset: customOffset
        });
    }

    var defaultOffset = '50%';

    for (i = 0; i < 17; i++) {
        customWayPoint('.timeline__item--' + i, 'timeline__item-bg', defaultOffset);
    }
</script>

</body>


</html>